<template>
    <div id="login">
        <div class="logo">
            <img src="../assets/logo.jpg" alt="login img">
        </div>

        <!-- 手机号 -->
        <InputGroup 
            type="number" 
            v-model:value="phone" 
            placeholder="手机号" 
            :btnTitle="btnTitle" 
            :disabled="disabled"
            :error="errors.phone" 
            @btnclick="getVeryCode()"
            />

        <!-- 验证码 -->
        <InputGroup 
            type="number" 
            v-model:value="verifyCode" 
            placeholder="验证码" 
            :error="errors.code" 
            @btnclick="getVeryCode()"
            />

        <!-- 用户服务协议 -->
        <div class="login_des">
            <p>新用户登录即自动注册，表示已同意</p>
            <span>《用户服务协议》</span>
        </div>


        <!-- 登录按钮 -->
        <div class="login_btn">
            <button :disabled="isclick" @click="login()">登录</button>
        </div>
    </div>
</template>

<script>
    import InputGroup from '../components/InputGroup'
    export default {
        name: 'login',
        data() {
            return {
                phone: '',
                verifyCode: '',
                errors: {},
                btnTitle: '获取验证码',
                disabled: false,
                //验证码
                keycode:''
            }
        },
        components: {
            InputGroup
        },
        computed:{
            isclick(){
                if(!this.phone || !this.verifyCode){
                    return true;
                }else{
                    return false;
                }
            }
        },
        methods:{
            login(){
                //取消错误提醒
                this.errors={};
                //发送请求，检验验证码
                if(this.keycode=='9876'){
                    //设置登录状态并且跳转到 /首页
                    localStorage.setItem("ele_login",true);
                    this.$router.push("/");
                }else{
                    this.errors={
                        code:'验证码错误'
                    }
                }
            },
            getVeryCode(){
                if(this.validataPhone()){
                    //发送网络请求
                    this.validateBtn();
                    this.Axios.get("data.json").then((result)=>{
                        console.log(result);
                        console.log(result.data.keycode);

                        //设置验证码
                        this.keycode=result.data.keycode;
                    }).catch((err)=>{
                        console.log(err);
                    })
                }
            },
            validateBtn(){
                let time=10;
                let timer=setInterval(()=>{
                    if(time==0){
                        clearInterval(timer);
                        this.btnTitle='再次获取验证码';
                        this.disabled=false;
                    }else{
                        //倒计时
                        this.btnTitle=time+"秒后重试";
                        this.disabled=true;
                        time--;
                    }
                },1000);
            },
            validataPhone(){
                //验证手机号码
                if(!this.phone){
                    this.errors={
                        phone:'手机号码不能为空'
                    }
                    return false;
                }else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)){
                    this.errors={
                        phone:"请填写正确的手机号码"
                    }
                    return false;
                }else{
                    this.errors={};
                    return true;
                }


            }
        }
    }
</script>

<style>
    #login {
        height: 100%;
        width: 100%;
        padding-top: 30px;
        box-sizing: border-box;
        background: #fff;
    }

    .logo {
        text-align: center;
    }

    .logo img {
        width: 150px;
    }

    .text_group,
    .login_des,
    .login_btn {
        margin-top: 20px;
        text-align: center;
    }

    .login_des {
        color: #aaa;
        line-height: 22px;
    }

    .login_des span {
        color: #4d90fe;
    }

    .login_btn button {
        width: 100%;
        height: 40px;
        background-color: #48ca38;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        border: none;
        outline: none;
    }

    .login_btn button[disabled] {
        background-color: #8bda81;
    }
</style>